<template>
    <div class="department-list-page">
        <!-- 顶部导航 -->
        <page-header title="全部科室" />

        <div class="department-list">
            <van-cell-group v-for="(category, index) in departmentCategories" :key="index" :title="category.name">
                <van-cell v-for="dept in category.departments" :key="dept.id" :title="dept.name" is-link
                    :to="`/hospital/${hospitalId}/department/${dept.id}`" />
            </van-cell-group>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import PageHeader from '@/components/common/PageHeader.vue'

const route = useRoute()
const hospitalId = Number(route.params.id)

// 模拟科室分类数据
const departmentCategories = ref([
    {
        name: '内科',
        departments: [
            { id: 1, name: '心内科' },
            { id: 2, name: '呼吸内科' },
            { id: 3, name: '消化内科' },
            { id: 4, name: '神经内科' }
        ]
    },
    {
        name: '外科',
        departments: [
            { id: 5, name: '普外科' },
            { id: 6, name: '骨外科' },
            { id: 7, name: '神经外科' },
            { id: 8, name: '胸外科' }
        ]
    },
    {
        name: '妇产科',
        departments: [
            { id: 9, name: '妇科' },
            { id: 10, name: '产科' },
            { id: 11, name: '计划生育科' }
        ]
    },
    {
        name: '儿科',
        departments: [
            { id: 12, name: '小儿内科' },
            { id: 13, name: '小儿外科' },
            { id: 14, name: '新生儿科' }
        ]
    }
])
</script>

<style scoped lang="scss">
.department-list-page {
    min-height: 100vh;
    background: #f5f5f5;
    padding-top: 46px; // 为顶部导航栏预留空间

    .department-list {
        .van-cell-group__title {
            padding: 16px;
            margin: 0;
            font-size: 14px;
            font-weight: 500;
            color: #333;
            background: #fff;
        }

        .van-cell-group {
            margin-bottom: 8px;
        }
    }
}
</style>